<template>
  <div>
    <el-upload class="upload-demo" :action="uploadUrl" :on-preview="handlePreview" :before-upload="beforeUpload"
      :on-remove="handleRemove" :file-list="fileList" list-type="picture" :show-file-list="false" name="files"
      :disabled="disabled!==''" :on-success="success" :accept="type == 'video' ? 'video/mp4' : 'image/jpeg,image/png'"
      :on-error="error">
      <div>
        <el-image v-if="value" fit="fil" style="width: 160px; height: 100px" :src="$Url + '/uploadtemp/' + value">
          <div slot="error" class="image-slot">
            <el-image fit="fil" style="width: 160px; height: 100px" :src="$Url + '/upload/' + value"></el-image>
          </div>
        </el-image>
        <div v-else class="flex" style="border: 1px dashed #cccc;width: 160px; height: 100px">
          <i class="el-icon-upload" style="font-size: 50px"></i>
        </div>
      </div>
      <p slot="tip" class="el-upload__tip" v-if="disabled==''">
        只能上传{{type === 'img' ? 'jpg/png' : 'mp4'}}文件，不超过10M
      </p>
    </el-upload>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "img"
    },
    value: {
      type: String,
      default: ""
    },
    disabled: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {
      flag: false,
      uploadUrl: this.$Url + '/upload/fileUpload',
      uploadHander: {
        'Accept': 'multipart/form-data',
      },
      fileList: []
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileList = fileList;
    },
    handlePreview(file) {
      console.log(file);
    },
    beforeUpload(file) {
      if (file.size > 10 * 1024 * 1024) {
        this.$message.error("文件大小超过10M！");
        return false;
      } else {
        if (this.type === "img") {
          if (["image/jpeg", 'image/png'].indexOf(file.type) < 0) {
            this.$message.error("请上传png/jpe格式文件！");
            return false;
          }
        } else {
          if (file.type !== "video/mp4") {
            this.$message.error("请上传MP4格式文件！");
            return false;
          }
        }
      }
    },
    success(response) {
      console.log(response)
      this.$message.success("上传成功！");
      this.$emit("input", response.data);
    },
    error(error) {
      // console.log(error);
      this.$message.error(error.type);
    }
  }
};
</script>
<style lang="scss" scoped></style>
